<template>
	<el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
		<el-form-item label="用户昵称" prop="userNickname">
			<el-input
				v-model.trim="form.userNickname"
				maxlength="10"
				show-word-limit
				clearable
				placeholder="请输入用户昵称"
			></el-input>
		</el-form-item>
		<el-form-item label="手机号" prop="mobile">
			<el-input
				v-model.trim="form.mobile"
				maxlength="11"
				show-word-limit
				clearable
				placeholder="请输入手机号"
			></el-input>
		</el-form-item>
		<el-form-item label="邮箱" prop="mail">
			<el-input
				v-model.trim="form.mail"
				maxlength="30"
				show-word-limit
				clearable
				placeholder="请输入邮箱"
			></el-input>
		</el-form-item>
		<el-form-item label="性别" prop="sex">
			<el-radio-group v-model="form.sex">
				<el-radio :label="0">男</el-radio>
				<el-radio :label="1">女</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" :loading="loading" @click="onSubmit()">保存</el-button>
		</el-form-item>
	</el-form>
</template>

<script lang="javascript">
	import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue';
	import { isMobile, isEmail } from '@/utils/validate';
	export default {
		props : {
			baseInfo : Object
		},
		setup (ctx) {
			let ruleForm = null;
			let data = reactive({
				loading : false,
				form : {
					userNickname : '',
					mobile : ctx.baseInfo.mobile,
					mail : ctx.baseInfo.mail,
					sex : ''
				},
				rules : {
					userNickname : [
						{ required : true, message : '请输入用户昵称', trigger : 'blur' }
					],
					mobile : [
						{
							required : true,
							validator : (rule, value, callback) => {
								if (!isMobile(value)) {
									callback(new Error('请输入11位合法的手机号码'));
								} else {
									callback();
								}
							},
							trigger : 'blur'
						}
					],
					mail : [
						{
							required : true,
							validator : (rule, value, callback) => {
								if (!isEmail(value)) {
									callback(new Error('请输入合法的邮箱'));
								} else {
									callback();
								}
							},
							trigger : 'blur'
						}
					],
					sex : [
						{
							required : true,
							trigger : 'blur',
							message : '请选择性别'
						}
					]
				}
			});
			onMounted(() => {
				ruleForm = getCurrentInstance().proxy.$refs['ruleForm'];
			});
			let onSubmit = () => {
				ruleForm.validate(async (valid) => {
					if (valid) {
						data.loading = true;
						try {
							console.log('baseInfo');
						} finally {
							data.loading = false;
						}
					}
				});
			};

			return {
				onSubmit,
				...toRefs(data)
			};
		}
	};
</script>

<style lang="scss" scoped></style>
